<template>
  <div>
    <dl class="item-byc" v-for="(item, index) in arr" :key="index">
      <dt>
        <van-image :src="item.pic" alt="" style="width: 100%; height: 108px" />
      </dt>
      <dd>
        <p style="font-size: 14px">{{ item.name }}</p>
        <p style="font-size: 12px; color: #b2b2b2; margin-top: 5px">
          {{ item.characteristic }}
        </p>
        <ul style="margin-top: 25px">
          <li>
            <p style="color: red">￥{{ item.minPrice }}</p>
            <p>低价</p>
          </li>
          <li>
            <p>￥{{ item.originalPrice }}</p>
            <p>原价</p>
          </li>
          <li>
            <p>{{ item.stores }}件</p>
            <p>限量</p>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: ["arr"],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
     
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  //生命周期
  created() {},
  mounted() {
   
  },
};
</script> 

<style scoped lang="scss">
.item-byc:nth-of-type(1){
   border-bottom: 1px solid #ffffff4d;
  margin-bottom: 10px;

}
.item-byc {
  width: 100%;
  display: flex;
  border-bottom: 1px solid darkgray;
  box-sizing: border-box;
  margin: 0px;
  dt {
    width: 108px;
    margin-right: 18px;
    box-sizing: border-box;
  }
  dd {
    margin: 0;
    flex: 1;
    p {
      margin: 0;
    }
    ul {
      width: 100%;
      display: flex;
      li {
        text-align: center;
        p {
          font-size: 11px;
        }
      }
      li:nth-of-type(2) {
        margin: 0px 20px;
      }
    }
  }
}
</style>
